<template>
	<div>
		<div class="buttons">
			<el-button @click="showDelMenu">删除菜单</el-button>
			<el-button @click="showAddMenu(0)">添加同级菜单</el-button>
			<el-button @click="showAddMenu(1)">添加子菜单</el-button>
			<el-button @click="showUpdateMenu()">修改菜单</el-button>
			<el-button @click="copy_menu">复制菜单</el-button>
			<el-button v-if="topshow" @click="topAddMenu()">添加顶级菜单</el-button>
		</div>
		<br />
		<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
		<el-row>
			<el-card class="box-card" style="height: 800px;">
				<el-col :span="5">
					<div class="setheight_scroller">
						<!--@select="onselect"  -->
						<el-menu active-text-color="#888" v-for="(item,index) in menu" :key="index" @select="onselect">
							<el-menu-item :index="item.detail_name">
								<i class="el-icon-menu"></i>
								<span slot="title">{{item.detail_name}}</span>
							</el-menu-item>
						</el-menu>
					</div>
				</el-col>

				<div class="setheight_scroller">
					<el-col :span="19">
						<el-tree  class="filter-tree" :data="menuData" :props="defaultProps" 
							:filter-node-method="filterNode" accordion show-checkbox node-key="id" 
							:expand-on-click-node="false" :check-strictly="true"  @check-change="handleClick" ref="tree">
							<span class="custom-tree-node" slot-scope="{ node, data }">
			        			<span  style="display:none;width:650px;">{{ node.label }}</span>
								<span style="width:220px;">{{ node.title}}</span>
								<span style="width:200px;text-align: left;">{{ node.power}}</span>
								<span style="width:200px;">{{ node.menu_index}}</span>
							</span>
						</el-tree>
					</el-col>
				</div>
			</el-card>
		</el-row>

		<el-dialog :title="addMsg" :visible.sync="dialogFormVisible" width="40%" @close="resetForm('addform')">
			<el-form :model="form" :rules="addFormRules" label-width="120px" ref="addform">
				<el-form-item label="菜单名称：" prop="menu_name">
					<el-input v-model="form.menu_name"></el-input>
				</el-form-item>
				<el-form-item label="菜单代码：" prop="menu_code">
					<el-input v-model="form.menu_code"></el-input>
				</el-form-item>
				<el-form-item label="菜单id：" prop="menu_id">
					<el-input  v-model="form.menu_id"></el-input>
				</el-form-item>
				<el-form-item label="菜单需求权限：" prop="menu_power_id">
					<!--<el-input v-model="form.menu_power_id"></el-input>-->
					<el-select v-model="form.menu_power_id" placeholder="请选择" filterable style='width:100%'>
						<el-option v-for="item in menuPowerData" :key="item.power_id" :label='item.power_name' :value="item.power_id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单序号：" prop="order_index">
					<el-input type="number" v-model="form.order_index"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addMenu">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="修改菜单" :visible.sync="dialogUpdate" width="40%">
			<el-form :model="form" label-width="120px">
				<el-form-item label="菜单名称：">
					<el-input v-model="form.menu_name"></el-input>
				</el-form-item>
				<el-form-item label="菜单代码：">
					<el-input v-model="form.menu_code"></el-input>
				</el-form-item>
				<el-form-item label="菜单id：" prop="menu_id">
					<el-input  v-model="form.menu_id"></el-input>
				</el-form-item>
				<el-form-item label="父菜单：">
					<el-cascader :options="menuData" expand-trigger="hover" :props="defaultCascader" v-model="form.selectFatherMenu" change-on-select></el-cascader>
				</el-form-item>
				<el-form-item label="菜单序号：">
					<el-input v-model="form.order_index"></el-input>
				</el-form-item>
				<el-form-item label="菜单需求权限：">
					<el-select v-model="form.menu_power_id" placeholder="请选择" filterable style='width:100%'>
						<el-option v-for="item in menuPowerData" :key="item.power_id" :label='item.power_name' :value="item.power_id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateMenu">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="复制菜单" :visible.sync="dialogUpdate_copymenu" width="40%">
			<el-form :model="form" label-width="120px">
				<el-form-item label="项目：">
					<el-select v-model="menu_copy" placeholder="请选择" @change="menu_copy_change">
					   	<el-option
					      v-for="(item,index) in menu"
					      :key="index"
					      :label="item.detail_name"
					      :value="item.detail_name">
					    </el-option>
					  </el-select>				
				</el-form-item>
				
				<el-form-item label="菜单：">
					<el-cascader :options="menuData" expand-trigger="hover" :props="defaultCascader" v-model="form.selectFatherMenu_copy_menu" change-on-select></el-cascader>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate_copymenu = false">取 消</el-button>
				<el-button type="primary" @click="menu_copy_button">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { apiparas, query, execute } from '../../api/api';
	import { Cookie } from '../../js/common';
	export default {
		data() {
			return {
				menu_show:[],
				menu: [],
				dialogFormVisible: false,
				dialogUpdate: false,
				topshow: false,
				form: {
					menuname: '',
					menu_name: '',
					menu_code: '',
					father_menu: '',
					menu_id:'',
					order_index: '',
					selectFatherMenu: [], //父菜单名称
					menu_power_id: '',
					selectFatherMenu_copy_menu:[],
				},
				menu_copy:'',
				checkboxItem: 0,
				selectFatherMenu1:'',
				menu_key: '',
				addMsg: '',
				dataw: '',
				dialogUpdate_copymenu:false,
				cpath:'',
				menuData: [],
				menuPowerData: [],
				//defaultProps树形数据结构
				defaultProps: {
					id: 'menu_key',
					children: 'subs',
					label: function(data, node) {
						node.title = data.title;
						node.power = data.menu_power_id;
						node.menu_index = data.menu_index;
					}
				},
				dataq:'',
				defaultCascader: {
					value: 'id',
					children: 'subs',
					label: 'title'
				},
				filterText: '',
				addFormRules: {
					menu_name: [{
							required: true,message: '请输入菜单名称',trigger: 'blur'
						},
					],
					menu_code: [{
							required: true,message: '请输入路径编码',trigger: 'blur'
						},
					],
					menu_power_id: [{
						required: true,message: '请输入菜单权限',trigger: 'blur'
					}, ],
					order_index: [{
						required: true,message: '请输入菜单序号',trigger: 'blur'
					}, ]
				}
			}
		},
		components: {
			//注册组件
		},
		mounted: function() {
			//生命周期

		},

		computed: {
			//计算属性
			onRoutes() {
				return this.$route.path.replace('/', '');
			}
		},
		methods: { //函数
			onselect(index, indexPath) {
				this.menuname = index;
				console.log(this.menuname,"234")
				this.getMenu();
			},

			handleClick(data, checked, node) {
				this.cpath1=data.cpath;
				this.dataw = data;
				this.checkboxItem++;
				if(this.checkboxItem==1){
					this.cpath=this.cpath1;
					this.dataq = data;
				}
				else if (this.checkboxItem % 2 == 0) {
					if(checked) {
						this.cpath=this.cpath1
						this.dataq = data;
						this.$refs.tree.setCheckedNodes([]);
						this.$refs.tree.setCheckedNodes([data]);
						//交叉点击节点
						
					} else {
//						this.cpath=data.cpath;
						this.$refs.tree.setCheckedNodes([]);
						//点击已经选中的节点，置空
					}
				}
			},
			//重置
			resetForm: function(formName) {
				this.$refs[formName].resetFields();
			},
			topAddMenu:function(){
				if(this.menuData.length==0){
					this.addMsg = '添加顶级菜单';
					this.dialogFormVisible = true;
					this.form = {
						menu_name: '',
						menu_code: '',
						father_menu: '00000000000000000000000000000000',
						order_index: '',
						selectFatherMenu: [], //父菜单名称
						menu_power_id: ''
					};
				}
			},
			showAddMenu: function(type) {
				this.form = {
					menu_name: '',
					menu_code: '',
					father_menu: '',
					order_index: '',
					selectFatherMenu: [], //父菜单名称
					menu_power_id: ''
				};
				//选择的节点
				let menuitem = this.$refs.tree.getCheckedNodes();
				if(menuitem.length === 0) {
					this.$message.error('请选择菜单');
					return;
				}
	
				//判断添加菜单类型  0-同级菜单   1-子菜单
				if(type === 0) {
					this.addMsg = '添加同级菜单';
					if(menuitem[0].pid === '') {
						this.form.father_menu = '00000000000000000000000000000000';
					} else {
						this.form.father_menu = menuitem[0].pid;
					}
				} else {
					this.addMsg = '添加子菜单';
					this.form.father_menu = menuitem[0].id;
				}
				this.dialogFormVisible = true;
			},
			showUpdateMenu: function() {
				let menuitem = this.$refs.tree.getCheckedNodes();
				if(menuitem.length === 0) {
					this.$message.error('请选择菜单');
					return;
				}
				this.form.menu_id=menuitem[0].menu_id;
				
				this.menu_key = menuitem[0].id;
				this.form.menu_name = menuitem[0].menu_name;
				this.form.menu_code = menuitem[0].menu_index;
				this.form.order_index = menuitem[0].order_index;
				this.form.menu_power_id = menuitem[0].menu_power_id;
				this.form.selectFatherMenu = [];
				this.form.selectFatherMenu.push(menuitem[0].pid);
				this.menu_show=this.form.selectFatherMenu;
				this.dialogUpdate = true;
//				this.form.selectFatherMenu=['95974de423cd43bb8319a9471bdab89d',"de6d93037d4b4f0aa4941a2ab05b7485"];
				var arr = this.cpath.split('|');
				this.form.selectFatherMenu=arr;
			},
			
			updateMenu: function() {
				//选择的节点
				let menuitem = this.$refs.tree.getCheckedNodes();
				if(menuitem.length === 0) {
					this.$message.error('请选择菜单');
					return;
				}
				var jsonparas = [];
				//增加查询条件			
				this.form.father_menu = this.form.selectFatherMenu.pop();
				if(this.form.father_menu === ''||this.form.father_menu==undefined) {
					this.form.father_menu = '00000000000000000000000000000000';
				}
				apiparas.pushPara(jsonparas, 'menu_key', this.menu_key);
				apiparas.pushPara(jsonparas, 'menu_name', this.form.menu_name);
				apiparas.pushPara(jsonparas, 'menu_code', this.form.menu_code);
				apiparas.pushPara(jsonparas, 'menu_power_id', this.form.menu_power_id);
				apiparas.pushPara(jsonparas, 'order_index', Number(this.form.order_index));
				apiparas.pushPara(jsonparas, 'father_menu', this.form.father_menu);
				apiparas.pushPara(jsonparas, 'menu_id', this.form.menu_id);
				
				//查询汇总
				var zhanshen=this.form.father_menu;
				let _paras = apiparas.getParas('default', 'basic|update_menu', jsonparas);
				execute(_paras).then(response => {
					if(response.errid == 0) {
						this.$notify({
								title: '成功信息',
								message: '修改菜单成功！',
								type: 'success'
						});	
						
						this.form.menu_name = '';
						this.form.menu_code = '';
						this.form.father_menu = '';
						this.form.order_index = '';
						this.form.menu_power_id = '';
						this.form.selectFatherMenu = [];
						this.dialogUpdate = false;
						this.getMenu();
					}
					else{
						this.form.selectFatherMenu=this.menu_show;
						this.$notify({
							title: '错误信息',
							message: response.errmsg,
							type: 'error'
						});
					}
				});
			},
			addMenu: function() {
				var jsonparas = [];
				//增加查询条件
				apiparas.pushPara(jsonparas, 'menu_name', this.form.menu_name);
				apiparas.pushPara(jsonparas, 'father_menu', this.form.father_menu);
				apiparas.pushPara(jsonparas, 'menu_code', this.form.menu_code);
				apiparas.pushPara(jsonparas, 'menu_power_id', this.form.menu_power_id);
				apiparas.pushPara(jsonparas, 'order_index', Number(this.form.order_index));
				apiparas.pushPara(jsonparas, 'port', this.menuname);
				apiparas.pushPara(jsonparas, 'menu_id', this.form.menu_id);
				//查询汇总
				let _paras = apiparas.getParas('default', 'basic|insert_menu', jsonparas);
				execute(_paras).then(response => {
					if(response.errid == 0) {
						this.form.menu_name = '';
						this.form.menu_code = '';
						this.form.father_menu = '';
						this.form.order_index = '';
						this.dialogFormVisible = false;
						this.getMenu();
						this.$notify({
							title: '成功信息',
							message: '添加菜单成功！',
							type: 'success'
						});
					} else {
						this.$notify({
							title: '错误信息',
							message: response.errmsg,
							type: 'error'
						});
					}

				});
			},
			showDelMenu: function() {
				//删除组别
				let menuitem = this.$refs.tree.getCheckedNodes();
				if(menuitem.length === 0) {
					this.$message.error('请选择菜单');
					return;
				}
				this.menu_key = menuitem[0].id;
				//判断菜单下是否有子菜单
				if(!menuitem[0].subs) {
					this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.delMenu();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message.error('您删除的菜单下有子菜单');
				}
			},
			delMenu: function() {
				var jsonparas = [];
				//增加查询条件
				apiparas.pushPara(jsonparas, 'menu_key', this.menu_key);
			//查询汇总
				let _paras = apiparas.getParas('default', 'basic|del_menu', jsonparas);
				execute(_paras).then(response => {
					if(response.errid == 0) {
						this.$message.success('删除菜单成功！');
					} else {
						this.$message.error('删除菜单失败！');
					}
					this.getMenu();
				});
			},
			filterNode(value, data) {
				if(!value) return true;
				return data.title.indexOf(value) !== -1;
			},
			refreshPage: function() {
				//刷新页面
			},
			getMenu: function() {
				let jsonparas = [];
				apiparas.pushPara(jsonparas, 'port', this.menuname);
				let token = Cookie.Get("token");
				let paras = apiparas.getParas_rtype('default', 'basic|getmenu', 3, jsonparas);
				query(paras).then(response => {
					let json_data = response.result;
					this.menuData = json_data;
					console.log(this.menuData,"[][]")
					if(this.menuData.length==0){
						this.topshow = true;
					}else{
						this.topshow = false;
					}
				});
				this.checkboxItem = 0;
			},
			//获取的是系统菜单还是APP菜单
			Menu: function() {
				let jsonparas = [];
				let paras = apiparas.getParas_rtype('default', 'basic|get_menutype', 0, jsonparas);
				query(paras).then(response => {
					console.log(response,'response');
					let json_data = response.result;
					this.menu = json_data;
					console.log(this.menu,'this.memu');
				});
			},
			//获取菜单
			getMenuPower: function() {
				let jsonparas = [];
				//增加查询条件
				apiparas.pushPara(jsonparas, 'power_id', '');
				apiparas.pushPara(jsonparas, 'classify', '10001');
				apiparas.pushPara(jsonparas, 'power_tree_key', '');

				//查询汇总
				let _paras = apiparas.getParas('default', 'basic|get_power', jsonparas);
				query(_paras).then(response => {
					let json_data = response.result;
					this.menuPowerData = json_data;
				});
			},
			//复制菜单按钮
			copy_menu(val){
				this.menu_copy='';
				this.menuname='';
				this.form.selectFatherMenu_copy_menu=[];
				let menuitem = this.$refs.tree.getCheckedNodes();
				if(menuitem.length === 0) {
					this.$message.error('请选择菜单');
					return;
				}
				this.dialogUpdate_copymenu=true;
			},
			//项目改变触发事件
			menu_copy_change(val){
				this.menuname=val;
				this.form.selectFatherMenu_copy_menu=[];
				this.getMenu();
			},
			//提交复制菜单按钮
			menu_copy_button(){
				
				this.form.father_menu = this.form.selectFatherMenu_copy_menu.pop();
				if(this.form.father_menu === ''||this.form.father_menu==undefined) {
					this.form.father_menu = '00000000000000000000000000000000';
				}
				let jsonparas = [
						{'name': 'menu_key','value':this.dataq.id}, 
						{'name': 'father_menu','value':this.form.father_menu}, 
						{'name': 'port','value': this.menuname},
					];
					console.log(this.dataq.id,"this.dataq.id");
					console.log(this.form.father_menu,"this.form.father_menu");
					console.log(this.menuname,"this.menuname");
					//查询汇总
					let _paras = apiparas.getParas('default', 'basic|copy_menu', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0) {
							this.getMenu();
//							this.menuname='';
							this.form.selectFatherMenu_copy_menu=[]	;
							this.dialogUpdate_copymenu = false;
							this.$notify({
								title: '成功信息',message: '修改成功！',type: 'success',duration: 1500
							});
						} else {
							this.menuname='';
							this.form.selectFatherMenu_copy_menu=[];
							this.$notify.error({
								title: '错误',message: response.errmsg,type: 'error',duration: 1500
							});
						}
					});
			},
		},
		created: function() {
			this.Menu();
			this.getMenuPower();
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
	}
</script>

<style>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
	
	.setheight_scroller {
		height: 750px;
		overflow: auto;
	}
</style>